<template>
  <div class="user-container">
    <van-nav-bar title="个人中心" />
    <div ref="preview" class="upload-pic" :style="{ 'background-image': avatar && `url(http://www.dsl2023hcy.love:3004${avatar})` }" @click="showAvatar">
      <div class="user-info">
        <div class="user-avatar">
          <van-uploader :deletable="false" :after-read="afterRead" />
          <van-image round width="60" height="60" :src="avatar ? 'http://www.dsl2023hcy.love:3004' + avatar : ''" />
        </div>
        <div class="user-dsc">
          <div class="user-nickname">{{ nickname }}</div>
          <div class="user-phone">{{ phone }}</div>
        </div>
      </div>
    </div>
    <div class="user-option">
      <van-cell title="个人资料" is-link to="/account" />
      <van-cell title="我的订单" is-link to="/order" />
      <van-cell title="我的收藏" is-link to="/like" />
      <van-cell title="地址管理" is-link to="/address" />
      <van-cell title="安全中心" is-link to="/secure" />
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request/request'
import { ImagePreview, Notify } from 'vant'

export default {
  name: 'userInfo',
  data() {
    return {
      avatar: '',
      nickname: '',
      phone: ''
    }
  },
  methods: {
    // 更新用户头像
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      let image_url = file.content
      let image_type = file.file.type.split('/')[1]
      const toast = this.$toast.loading({
        message: '加载中...',
        duration: 0
      })
      try {
        const data = await axios.post('/user/update/avatar', { avatar: image_url, type: '.' + image_type })
        if (data.code === 0) {
          this.avatar = data.data.avatar
          Notify({ type: 'success', message: data.msg, duration: 1000 })
        } else if (data.code === 403 || data.msg === '身份认证错误') {
          Notify({
            type: 'danger',
            message: data.msg,
            duration: 1000,
            onClose: () => {
              localStorage.removeItem('user_token')
              this.$router.replace('/login')
            }
          })
        } else {
          Notify({ type: 'danger', message: data.msg, duration: 1000 })
        }
      } catch {
        Notify({ type: 'danger', message: '上传失败！', duration: 1000 })
      } finally {
        toast.clear()
      }
    },
    // 获取用户信息
    async getUserInfo() {
      this.$toast.loading({
        message: '加载中...',
        duration: 0
      })
      try {
        const data = await axios.get('/user/userinfo')
        if (data.code === 0) {
          this.avatar = data.data.avatar
          this.nickname = data.data.nickname
          this.phone = data.data.phone
          Notify({ type: 'success', message: data.msg, duration: 1000 })
        } else if (data.code === 403 || data.msg === '身份认证错误') {
          Notify({
            type: 'danger',
            message: data.msg,
            duration: 1000,
            onClose: () => {
              localStorage.removeItem('user_token')
              this.$router.replace('/login')
            }
          })
        } else {
          Notify({ type: 'danger', message: data.msg, duration: 1000 })
        }
      } catch {
        Notify({ type: 'danger', message: '请求失败！', duration: 1000 })
      } finally {
        this.$toast.clear()
      }
    },
    // 用户点击头像时查看头像
    showAvatar(e) {
      if (e.target === this.$refs.preview) {
        ImagePreview(['http://www.dsl2023hcy.love:3004' + this.avatar])
      }
    }
  },
  created() {
    this.getUserInfo()
  }
}
</script>

<style lang="less" scoped>
.user-container {
  background-color: #f5f5f5;
  min-height: 100vh;

  .upload-pic {
    background-repeat: no-repeat;
    background-size: cover;
    height: 160px;
    width: 100%;
    position: relative;
    background-position: 50%;

    .user-info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80px;
      z-index: 999;
      padding: 10px;
      display: flex;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.7);

      .user-avatar {
        position: relative;

        ::v-deep .van-uploader {
          position: absolute;
          z-index: 10;
          left: 0;
          top: 0;
        }
        ::v-deep .van-uploader__upload {
          margin: 0;
          height: 60px;
          width: 60px;
          background: transparent;

          .van-uploader__upload-icon {
            color: transparent;
            background: transparent;
          }
        }
      }
      .user-dsc {
        margin-left: 15px;
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .user-nickname,
        .user-phone {
          font-weight: 700;
        }
        .user-nickname {
          color: #f92946;
        }
      }
    }
  }

  .user-option {
    padding-top: 30px;
    background-color: #fff;
  }
}
</style>
